<template>
  <div>
    <van-icon name="arrow-left" size="27" color="gray" style="margin-top: 2rem;margin-left: 1rem;" />
    <img src="./../assets/poem.gif" class="poem" />
    <div class="imgList">
      <img
        v-for="(item, index) in imgSrc.slice(0,6)"
        :src="item"
        :class="index%2===0?'imgLeft':'imgRight'"
        :key="index"
        @click="handleClick(index)"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgStatus: [0, 0, 0, 0, 0, 0], //点一次后变为1，换图片，为1点的时候往下走
      imgSrc: [
        require("@/assets/img10.gif"),
        require("@/assets/img20.gif"),
        require("@/assets/img30.gif"),
        require("@/assets/img40.gif"),
        require("@/assets/img50.gif"),
        require("@/assets/img60.gif"),
        require("@/assets/img11.png"),
        require("@/assets/img21.png"),
        require("@/assets/img41.png"),
        require("@/assets/img41.png"),
        require("@/assets/img41.png"),
        require("@/assets/img41.png")
      ]
    };
  },
  methods: {
    handleClick(num) {
      if (this.imgStatus[num] === 0) {
        //是第一次点，换图片
        this.imgStatus[num] = 1;
        let buf0 = this.imgSrc[num];
        let buf5 = this.imgSrc[num + 6];
        this.imgSrc.splice(num, 1, buf5);
        this.imgSrc.splice(num + 6, 1, buf0);
      } else {
        //是第二次点，跳转
        this.imgStatus[num] = 0;
        let buf0 = this.imgSrc[num];
        let buf5 = this.imgSrc[num + 6];
        this.imgSrc.splice(num, 1, buf5);
        this.imgSrc.splice(num + 6, 1, buf0);
        //根据num跳转的地址不同
        switch (num) {
          case 0:
            this.$router.push({ path: "/pickRose" });
            break;
          case 1:
            this.$router.push("/mountainGhost");
            break;
          case 2:
            this.$router.push("/emigrate");
            break;
          case 3:
            this.$router.push("/emigrate");
            break;
          case 4:
            this.$router.push("/emigrate");
            break;
          case 5:
            this.$router.push("/emigrate");
            break;
        }
        // this.$router.push({path:'')};
      }
    }
  }
  // watch: {
  //   imgSrc: {
  //     handler(newVal) {
  //       for (let val of newVal) {
  //         console.log(val)
  //       }
  //     }
  //   }
  // }
};
</script>
<style scoped>
.poem {
  width: 5.5rem;
  float: right;
  margin-top: 0.5rem;
  margin-bottom: 3.6rem;
}
.imgLeft {
  width: 4.7rem;
  height: 4.7rem;
  margin-left: 0.2rem;
}
.imgRight {
  width: 4.7rem;
  height: 4.7rem;
  margin-left: 0.2rem;
}
</style>